<template>
  <div class="wrapper">
      <div class="title">周末去哪儿</div>
      <ul>
          <li class ='item border-bottom' v-for="(item,index) of recommendList" :key = index>
              <div class="img-wrapper">
                  <img class="item-img" :src="item.imgUrl" alt="">
              </div>
              <div class="item-info">
                <p class="item-title">{{item.title}}</p>
                <p class="item-desc">{{item.desc}}</p>
              </div>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
  components:{},
  props:{
      recommendList:Array
  },
  data(){
    return {
        // recommendList:[
        //     {
        //         imgUrl:'http://img1.qunarzz.com/sight/source/1509/81/0412da9c4db66a.jpg_r_640x214_8e23871e.jpg',
        //         itemTitle:'大连圣亚海洋世界',
        //         itemDesc:'浪漫大连首站，大连海洋主题乐园',
        //         id:'001'
        //     },
        //     {
        //         imgUrl:'http://img1.qunarzz.com/sight/source/1505/aa/7baaf8a851d221.jpg_r_640x214_1431200f.jpg',
        //         itemTitle:'故宫',
        //         itemDesc:'世界五大宫之首，穿越与你近在咫尺',
        //         id:'002'

        //     },
        //     {
        //         imgUrl:'http://img1.qunarzz.com/sight/source/1505/ce/bc89bc2f0e33ea.jpg_r_640x214_3e408453.jpg',
        //         itemTitle:'北京欢乐谷',
        //         itemDesc:'亚洲唯一飞形式过山车等你来',
        //         id:'003'
        //     },
        //     {
        //         imgUrl:'http://img1.qunarzz.com/sight/source/1505/b2/fde1bfcd057a52.jpg_r_640x214_bbf3fa44.jpg',
        //         itemTitle:'古北水镇',
        //         itemDesc:'古来气息，山水古镇等你来',
        //         id:'004'
        //     },
        // ]
    }
  },
  watch:{},
  computed:{},
  methods:{},
  created(){},
  mounted(){}
}
</script>
<style lang="stylus" scoped>
@import '~styles/mixin.styl';
.wrapper
  .title
    line-height 0.8rem
    background #eee
    text-indent 0.2rem
  .item
    overflow hidden
    .img-wrapper
      height 0
      overflow hidden
      padding-bottom 33.9%
      .item-img
        width 100%
    .item-info
      padding 0.1rem
      //min-width 0 
      .item-title
        ellips()
        line-height 0.54rem
        font-size 0.32rem
      .item-desc
        ellips()
        line-height 0.4rem
        font-size 0.28rem
      .item-button
        background #ff9300
        padding 0.1rem
        border-radius 0.06rem
        line-height 1
        margin-top 0.16rem
        color #fff
      
</style>